<template>
<div class="three-scene" ref="threeScene" :style="{width:width+'px',height:height+'px'}" @change="onChange">

</div>
</template>

<script setup>
import { reactive,ref,onBeforeMount,onBeforeUnmount, onMounted } from "vue";
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/Addons.js";
//#region 变量定义
const props = defineProps(['width','height']);
const threeScene=ref(null)
let scene,camera,renderer,controls
 
//#endregion 变量定义

//#region 生命周期
onMounted(() => {
initThreeScene()
threeScene.value.addEventListener('resize',onResize)
  
});

onBeforeUnmount(() => {
    
});
//#endregion 生命周期
//#region Function

const initThreeScene = ()=>{ 
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera( 75, props.width/props.height, 0.1, 1000 ) 
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(props.width,props.height)
    threeScene.value.appendChild(renderer.domElement) 
    controls = new OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    controls.minDistance = 1;
    controls.maxDistance = 100;
    controls.maxPolarAngle = Math.PI / 2;

    animate()
}
const onResize=()=>{
    console.log( 'onResize' )
    camera.aspect = props.width/props.height
    camera.updateProjectionMatrix()
    renderer.setSize( props.width, props.height )
}
const render = ()=>{
    renderer.render( scene, camera );
}
const animate=()=>{
    requestAnimationFrame(animate)
    controls.update();
    render()
}



const onChange=()=>{
    console.log(  'onChange' )
}
//#endregion Function
</script>

<style scoped lang="less">
.three-scene{
    
}
</style>